<template>
    <BaseComponent :label="label" :required="required" :help="help">
        <el-select 
            v-model="modelValue" 
            class="model-select"
            placeholder="请选择模型"
            @change="handleChange"
        >
            <el-option
                v-for="model in models"
                :key="model.value"
                :label="model.title"
                :value="model.value"
            />
        </el-select>
    </BaseComponent>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import BaseComponent from './BaseComponent.vue';
import type { SelectOption } from '@/types/workflow-components';

const props = defineProps<{
    label?: string;
    required?: boolean;
    help?: string;
    value?: string;
    models?: SelectOption[];
}>();

const emit = defineEmits<{
    (e: 'update:value', value: string): void;
    (e: 'change', value: string): void;
}>();

const modelValue = ref(props.value);

watch(() => props.value, (newValue) => {
    modelValue.value = newValue;
});

const handleChange = (value: string) => {
    emit('update:value', value);
    emit('change', value);
};
</script> 